<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>前置机实时性能</title>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/demo/demo.css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/jquery.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/Highcharts-5.0.14/code/highcharts.js"></script>
	<script src="${pageContext.request.contextPath}/static/Highcharts-5.0.14/code/modules/exporting.js"></script>
	<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
	<!-- 中文包要放在exporting.js下面，否则无效 -->
</script>
<style type="text/css">
	.tabs-panels {
		height: 400px !important;
	}
</style>
<script type="text/javascript">
function searchFrontProcessorState(){
	var frontProcessorId = $("#frontProcessorId").combobox("getValue");
	console.log("frontProcessorId: " + frontProcessorId);
	initialFrontProcessorId = frontProcessorId;
}

function getData() {
	var dataObj;
	var url = "${pageContext.request.contextPath}/frontProcessorState/listRealtimeUsageRate.do?frontProcessorId="+initialFrontProcessorId;
	var data = {
		type : 1
	};
	$.ajax({
		type : "get",
		async : false, //同步请求   
		url : url,
		data : data,
		timeout : 5000,
		success : function(dates) {
			//转为JSON对象
			dataObj = eval("(" + dates + ")");
			$("#dg").datagrid("loadData", dataObj);
		},
		error : function() {
			alert("获取数据失败，请稍后再试！");
		}
	});
	return dataObj;
}

function formatFrontProcessorId(row) {
	var s = '<span style="font-weight:bold">' + row.siteName + '</span><br/>'
			+ '<span style="color:#888">' + row.frontProcessorId + '</span>';
	return s;
}

function onLoadComboboxSuccess() {
    var val = $(this).combobox("getData");
    //console.log("加载完成2：");
    //console.log(val);
    for (var item in val[0]) {
    	if (item == "siteName") {
            $(this).combobox("select", val[0][item]);
    	} else if (item == "frontProcessorId") {
            initialFrontProcessorId = val[0][item];
            $(this).combobox("setValue", initialFrontProcessorId);
            //console.log( $(this).combobox("value"));
        }
    }
}

</script>
</head>
<body>
	
	<div style="margin-top:8px">&nbsp;前置机：&nbsp;
		<input class="easyui-combobox" size="30" id="frontProcessorId" name="frontProcessorId" data-options="panelHeight:'130',valueField:'frontProcessorId',textField:'siteName',url:'${pageContext.request.contextPath}/frontProcessorInfo/frontProcessorIdAndSiteNameComboList.do',formatter: formatFrontProcessorId,onLoadSuccess:onLoadComboboxSuccess"/>
 		<a href="javascript:searchFrontProcessorState()" class="easyui-linkbutton" iconCls="icon-search" plain="true"><b style="font-size:15px">搜索</b></a>
 	</div>
 	
	<div class="easyui-tabs" data-options="fit:true,plain:true">
		<div title="CPU使用率" style="padding:10px;"><div id="container1" style="min-width:100%;height:400px"></div></div>
		<div title="内存使用率" style="padding:10px;"><div id="container2" style="min-width:100%;height:400px"></div></div>
		<div title="硬盘使用率" style="padding:10px;"><div id="container3" style="min-width:100%;height:400px"></div></div>
	</div>
	
	<script>
	Highcharts.setOptions({
		global : {
			useUTC : false
		}
	});

	function activeLastPointToolip(chart) {
		//设置最后新增的一个数据进行数据提示框显示
		var points = chart.series[0].points;
		chart.tooltip.refresh(points[points.length - 1]);

	}
	Highcharts.setOptions({
		// 所有语言文字相关配置都设置在 lang 里
		lang : {
			resetZoom : '重置',
			resetZoomTitle : '重置缩放比例'
		}
	});

	$('#container1')
			.highcharts(
					{
						credits : {
							enabled : false
						// 禁用版权信息
						},
						chart : {
							type : 'spline',//修改为bar可以显示柱形图
							zoomType : 'xy',
							animation : Highcharts.svg, // don't animate in old IE
							marginRight : 10,
							events : {
								load : function() {
									// set up the updating of the chart each second
									var series_CPUUsageRate_CURRENT_QUANTITY = this.series[0];
									var chart = this;
									setInterval(
											function() {
												getDataObj = getData();
												
												var currentTime = new Date();
												var x = (currentTime).getTime(); // current time

												var y_CPUUsageRate_CURRENT_QUANTITY = getDataObj.rows[0].cpuUsageRate;
												
												var currentTimeStr = currentTime
														.getFullYear()
														+ '-'
														+ (currentTime
																.getMonth() + 1)
														+ '-'
														+ currentTime.getDate()
														+ '    '
														+ currentTime
																.getHours()
														+ '：'
														+ currentTime
																.getMinutes()
														+ '：'
														+ currentTime
																.getSeconds();
												//通过HTML解释的方式生成表数据
												//document.getElementById("tbl").innerHTML="<table cellspacing=\"5\"><tr><th>数据类型</th><th>当前时间</th><th>文件个数</th></tr><tr align=\"center\"><td>频谱数据</td><td>"+currentTimeStr+"</td><td>"+y_frequencySpectrum_CURRENT_QUANTITY+"</td></tr><tr align=\"center\"><td>SACCH</td><td>"+currentTimeStr+"</td><td>"+y_sACCH_CURRENT_QUANTITY+"</td></tr><tr align=\"center\"><td>SDCCH</td><td>"+currentTimeStr+"</td><td>"+y_sDCCH_CURRENT_QUANTITY+"</td></tr><tr align=\"center\"><td>CPUUsageRate</td><td>"+currentTimeStr+"</td><td>"+y_CPUUsageRate_CURRENT_QUANTITY+"</td></tr><tr align=\"center\"><td>TCH</td><td>"+currentTimeStr+"</td><td>"+y_tCH_CURRENT_QUANTITY+"</td></tr></table>";

												var obj = {
													"total" : 100,
													"rows" : [ {
														"dataType" : "CPUUsageRate",
														"currentTime" : currentTimeStr,
														"filesNumber" : y_CPUUsageRate_CURRENT_QUANTITY
													} ]
												};
												$("#dg").datagrid("loadData",
														obj);

												series_CPUUsageRate_CURRENT_QUANTITY
														.addPoint(
																[ x,
																		y_CPUUsageRate_CURRENT_QUANTITY ],
																true, true);

												activeLastPointToolip(chart)
											}, 1000);
								}
							}
						},
						title : {
							text : 'CPU使用率实时监控',
							style : {
								color : "#000",
								fontWeight : "bold"
							}
						},
						xAxis : {
							title : {
								text : '时间'
							},
							type : 'datetime',
							tickPixelInterval : 150
						},
						yAxis : {
							title : {
								text : 'CPU使用率（%）'
							},
							plotLines : [ {
								value : 0,
								width : 1,
								color : '#808080'
							} ],
							 tickPositions: [0,10,20,30,40,50,60,70,80,90,100]
						},
						tooltip : {
							/* enabled : false, */
							formatter : function() {
								return '<b>'
										+ this.series.name
										+ '</b><br/>'
										+ Highcharts.dateFormat(
												'%Y-%m-%d %H:%M:%S', this.x)
										+ '<br/>'
										+ Highcharts.numberFormat(this.y, 6)+"%";
							}
						},
						legend : {
							//设置打开图例
							enabled : true
						},
						exporting : {
							enabled : true
						},
						series : [ {
							name : 'CPU使用率',
							data : (function() {
								// generate an array of random data
								var data = [], time = (new Date()).getTime(), i;
								for (i = -19; i <= 0; i += 1) {
									data.push({
										x : time + i * 1000,
										y : 0
									});
								}
								return data;
							}())
						} ]
					}, function(c) {
						activeLastPointToolip(c)
					});
</script>

<script>

	$('#container2')
			.highcharts(
					{
						credits : {
							enabled : false
						// 禁用版权信息
						},
						chart : {
							type : 'spline',//修改为bar可以显示柱形图
							zoomType : 'xy',
							animation : Highcharts.svg, // don't animate in old IE
							marginRight : 10,
							events : {
								load : function() {
									// set up the updating of the chart each second
									var series_memoryUsageRate_CURRENT_QUANTITY = this.series[0];
									var chart = this;
									setInterval(
											function() {
												getDataObj = getData();
												
												var currentTime = new Date();
												var x = (currentTime).getTime(); // current time

												var y_memoryUsageRate_CURRENT_QUANTITY = getDataObj.rows[0].memoryUsageRate;
												
												var currentTimeStr = currentTime
														.getFullYear()
														+ '-'
														+ (currentTime
																.getMonth() + 1)
														+ '-'
														+ currentTime.getDate()
														+ '    '
														+ currentTime
																.getHours()
														+ '：'
														+ currentTime
																.getMinutes()
														+ '：'
														+ currentTime
																.getSeconds();
												//通过HTML解释的方式生成表数据
												//document.getElementById("tbl").innerHTML="<table cellspacing=\"5\"><tr><th>数据类型</th><th>当前时间</th><th>文件个数</th></tr><tr align=\"center\"><td>频谱数据</td><td>"+currentTimeStr+"</td><td>"+y_frequencySpectrum_CURRENT_QUANTITY+"</td></tr><tr align=\"center\"><td>SACCH</td><td>"+currentTimeStr+"</td><td>"+y_sACCH_CURRENT_QUANTITY+"</td></tr><tr align=\"center\"><td>SDCCH</td><td>"+currentTimeStr+"</td><td>"+y_sDCCH_CURRENT_QUANTITY+"</td></tr><tr align=\"center\"><td>CPUUsageRate</td><td>"+currentTimeStr+"</td><td>"+y_CPUUsageRate_CURRENT_QUANTITY+"</td></tr><tr align=\"center\"><td>TCH</td><td>"+currentTimeStr+"</td><td>"+y_tCH_CURRENT_QUANTITY+"</td></tr></table>";

												var obj = {
													"total" : 100,
													"rows" : [ {
														"dataType" : "memoryUsageRate",
														"currentTime" : currentTimeStr,
														"filesNumber" : y_memoryUsageRate_CURRENT_QUANTITY
													} ]
												};
												$("#dg").datagrid("loadData",
														obj);

												series_memoryUsageRate_CURRENT_QUANTITY
														.addPoint(
																[ x,
																		y_memoryUsageRate_CURRENT_QUANTITY ],
																true, true);

												activeLastPointToolip(chart)
											}, 1000);
								}
							}
						},
						title : {
							text : '内存使用率实时监控',
							style : {
								color : "#000",
								fontWeight : "bold"
							}
						},
						xAxis : {
							title : {
								text : '时间'
							},
							type : 'datetime',
							tickPixelInterval : 150
						},
						yAxis : {
							title : {
								text : '内存使用率（%）'
							},
							plotLines : [ {
								value : 0,
								width : 1,
								color : '#808080'
							} ],
							 tickPositions: [0,10,20,30,40,50,60,70,80,90,100]
						},
						tooltip : {
							/* enabled : false, */
							formatter : function() {
								return '<b>'
										+ this.series.name
										+ '</b><br/>'
										+ Highcharts.dateFormat(
												'%Y-%m-%d %H:%M:%S', this.x)
										+ '<br/>'
										+ Highcharts.numberFormat(this.y, 6)+"%";
							}
						},
						legend : {
							//设置打开图例
							enabled : true
						},
						exporting : {
							enabled : true
						},
						series : [ {
							name : '内存使用率',
							data : (function() {
								// generate an array of random data
								var data = [], time = (new Date()).getTime(), i;
								for (i = -19; i <= 0; i += 1) {
									data.push({
										x : time + i * 1000,
										y : 0
									});
								}
								return data;
							}())
						} ]
					}, function(c) {
						activeLastPointToolip(c)
					});
</script>

<script>

	$('#container3')
			.highcharts(
					{
						credits : {
							enabled : false
						// 禁用版权信息
						},
						chart : {
							type : 'spline',//修改为bar可以显示柱形图
							zoomType : 'xy',
							animation : Highcharts.svg, // don't animate in old IE
							marginRight : 10,
							events : {
								load : function() {
									// set up the updating of the chart each second
									var series_harddiskUsageRate_CURRENT_QUANTITY = this.series[0];
									var chart = this;
									setInterval(
											function() {
												getDataObj = getData();
												
												var currentTime = new Date();
												var x = (currentTime).getTime(); // current time

												var y_harddiskUsageRate_CURRENT_QUANTITY = getDataObj.rows[0].harddiskUsageRate;
												
												var currentTimeStr = currentTime
														.getFullYear()
														+ '-'
														+ (currentTime
																.getMonth() + 1)
														+ '-'
														+ currentTime.getDate()
														+ '    '
														+ currentTime
																.getHours()
														+ '：'
														+ currentTime
																.getMinutes()
														+ '：'
														+ currentTime
																.getSeconds();
												//通过HTML解释的方式生成表数据
												//document.getElementById("tbl").innerHTML="<table cellspacing=\"5\"><tr><th>数据类型</th><th>当前时间</th><th>文件个数</th></tr><tr align=\"center\"><td>频谱数据</td><td>"+currentTimeStr+"</td><td>"+y_frequencySpectrum_CURRENT_QUANTITY+"</td></tr><tr align=\"center\"><td>SACCH</td><td>"+currentTimeStr+"</td><td>"+y_sACCH_CURRENT_QUANTITY+"</td></tr><tr align=\"center\"><td>SDCCH</td><td>"+currentTimeStr+"</td><td>"+y_sDCCH_CURRENT_QUANTITY+"</td></tr><tr align=\"center\"><td>CPUUsageRate</td><td>"+currentTimeStr+"</td><td>"+y_CPUUsageRate_CURRENT_QUANTITY+"</td></tr><tr align=\"center\"><td>TCH</td><td>"+currentTimeStr+"</td><td>"+y_tCH_CURRENT_QUANTITY+"</td></tr></table>";

												var obj = {
													"total" : 100,
													"rows" : [ {
														"dataType" : "CPUUsageRate",
														"currentTime" : currentTimeStr,
														"filesNumber" : y_harddiskUsageRate_CURRENT_QUANTITY
													} ]
												};
												$("#dg").datagrid("loadData",
														obj);

												series_harddiskUsageRate_CURRENT_QUANTITY
														.addPoint(
																[ x,
																		y_harddiskUsageRate_CURRENT_QUANTITY ],
																true, true);

												activeLastPointToolip(chart)
											}, 1000);
								}
							}
						},
						title : {
							text : '硬盘使用率实时监控',
							style : {
								color : "#000",
								fontWeight : "bold"
							}
						},
						xAxis : {
							title : {
								text : '时间'
							},
							type : 'datetime',
							tickPixelInterval : 150
						},
						yAxis : {
							title : {
								text : '硬盘使用率（%）'
							},
							plotLines : [ {
								value : 0,
								width : 1,
								color : '#808080'
							} ],
							 tickPositions: [0,10,20,30,40,50,60,70,80,90,100]
						},
						tooltip : {
							/* enabled : false, */
							formatter : function() {
								return '<b>'
										+ this.series.name
										+ '</b><br/>'
										+ Highcharts.dateFormat(
												'%Y-%m-%d %H:%M:%S', this.x)
										+ '<br/>'
										+ Highcharts.numberFormat(this.y, 6)+"%";
							}
						},
						legend : {
							//设置打开图例
							enabled : true
						},
						exporting : {
							enabled : true
						},
						series : [ {
							name : '硬盘使用率',
							data : (function() {
								// generate an array of random data
								var data = [], time = (new Date()).getTime(), i;
								for (i = -19; i <= 0; i += 1) {
									data.push({
										x : time + i * 1000,
										y : 0
									});
								}
								return data;
							}())
						} ]
					}, function(c) {
						activeLastPointToolip(c)
					});
</script>

</body>
</html>